//- extends layout

//- block content
//-   h1= title
//-   p Welcome to #{title}
doctype html
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible' content='IE=edge')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    script(src='https://code.jquery.com/jquery-3.6.0.min.js' integrity='sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=' crossorigin='anonymous')
    title Document
    style.
      .file-list{
      padding: 20px;
      background: lightblue;
      list-style-type: none;
      }
      .file-list img{
      max-width: 70px;
      vertical-align: middle;
      }
      .file-list .file-item{margin-bottom: 10px}
      .file-list .file-item .file-name{margin-left: 20px}
      .file-list .file-item .file-del{
      color: red;
      margin-left: 200px;}
  body
    form
      div
        input#choose-file(type='file' multiple='')
        button#upload 上传
      ul.file-list
    script.
      var $button = $('#upload'),
      //选择文件按钮
      $file = $("#choose-file"),
      //回显的列表
      $list = $('.file-list'),
      //选择要上传的所有文件
      fileList = [],
      sendList = [];
      //当前选择上传的文件
      var curFile ;
      $file.on('change',function(){
      //原生的文件对象，相当于$file.get(0).files[0];
      curFile = this.files;
      //将FileList对象变成数组
      fileList = fileList.concat(Array.from(curFile));
      for(var i=0,len = curFile.length;i < len;i++){
      reviewFile(curFile[i])
      }
      })
      function reviewFile(file){
      //实例化fileReader,
      let  fd = new FileReader();
      //获取当前选择文件的类型
      let fileType = file.type;
      //调它的readAsDataURL并把原生File对象传给它，
      fd.readAsDataURL(file);//base64
      //监听它的onload事件，load完读取的结果就在它的result属性里了
      fd.onload = function(){
      if(/^image\\/[jpeg|png|jpg|gif]/.test(fileType)){
      $list.append('<li class="file-item"><img src="'+this.result+'" alt=""><span class="file-name">'+file.name+'</span><span class="file-del">删除</span></li>')
      }else{
      $list.append('<li class="file-item"><span class="file-name">'+file.name+'</span><span class="file-del">删除</span></li>')
      }
      }
      }
      $(".file-list").on('click','.file-del',function(){
      let $parent = $(this).parent();
      let index = $parent.index();
      fileList.splice(index,1);
      $parent.remove()
      });
      $button.on('click',function(){
      console.log(window.sessionStorage.getItem('username'))
      if(fileList.length>0){
      for(var i=0,len = fileList.length;i < len;i++){
      let formData = new FormData();
      formData.append('file',fileList[i]);
      // const xhr=new XMLHttpRequest();
      // xhr.open('POST','http://localhost/uppicture');
      // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      // xhr.send('username='+window.sessionStorage.getItem('username')+'&formdata='+formData);
      // xhr.onreadystatechange=function(){
      //     // 判断
      //     if(xhr.readyState===4){
      //         if(xhr.status>= 200 && xhr.status<=300){
      //             // 处理服务端返回的结果
      //             console.log(xhr.response);
      //             (data,statusText,headers) => {
      //                 if(data.success){
      //                     var filed = data.data[0];
      //                     sendList.push(filed);
      //             }
      //         }
      //             //window.location.href = "./register.html?username=18870655271";
      //         }
      //     }
      // }
      $.ajax({
      url:'http://localhost/uppicture',
      type:'post',
      data:formData,
      processData:false,
      contentType:false,
      success:function(data,statusText,headers){
      if(data.success){
      var filed = data.data[0];
      sendList.push(filed);
      }
      }
      })
      }
      }else{
      alert("请选择文件！")
      }
      return false;
      })
